<template>
    <div class="dashboard">
        <Header />
        <div id="outerContainer">
            <div id="clippingBounds" style="width:auto" ref="clippingBounds">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script>
import Header from '@components/header/Header'
export default {
  components: {
    Header
  },
  watch: {
    $route: function (to, from) {
      document.querySelector('#outerContainer').scrollTop = 0
    }
  },
  mounted () {
    const bodyHeight = document.documentElement.clientHeight
    const clip = document.getElementById('clippingBounds')
    if (clip) {
      clip.style.height = bodyHeight - 51 + 'px'
    }
    window.onresize = () => {
      const bodyHeight = document.documentElement.clientHeight
      const clip = document.getElementById('clippingBounds')
      if (clip) {
        clip.style.height = bodyHeight - 51 + 'px'
      }
    }
  },
  methods: {}
}
</script>

<style lang="stylus" scoped>
#outerContainer {
    padding-left: 0;
}

#sitemapHost {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 168px;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;

    ul {
        li {
            height: 80px;
            line-height: 80px;
            text-align: center;

            a {
                display: block;
                height: 80px;
                line-height: 80px;
                color: #17233d;
                text-decoration: none;
            }

            i {
                margin-right: 18px;
            }

            .router-link-active {
                background: #17233d;

                color: #ffffff;

                i {
                    color: #ffffff;
                }
            }
        }
    }
}

.leftPanel,
.rightPanel,
.mobileOnlyPanel {
    position: relative;
    background-color: #f2f2f2;
    overflow: hidden;
    width: 0px;
    flex-shrink: 0;
}

.leftPanel {
    box-shadow: 2px 0 6px 0 rgba(0, 58, 113, 0.35);
    background: #fff;

    .site {
        background: #fff;
        text-align: center;
    }
}

@keyframes leftPanel-in {
    from {
        left: -168px;
    }

    to {
        left: 0px;
    }
}

@keyframes leftPanel-out {
    from {
        left: 0px;
    }

    to {
        left: -168px;
    }
}

@keyframes out-in {
    from {
        padding-left: 0;
    }

    to {
        padding-left: 168px;
    }
}

@keyframes out-out {

    from {
        padding-left: 168px;
    }

    to {
        padding-left: 0;
    }
}

.leftPanel.config-fadeIn {
    animation: leftPanel-in .2s;
    animation-fill-mode: forwards;
}

.leftPanel.config-fadeOut {
    animation: leftPanel-out .2s;
    animation-fill-mode: forwards;
}

#outerContainer.config-fadeIn {
    animation: out-in .2s;
    animation-fill-mode: forwards;

    .bread {
        left: 168px;
    }
}

#outerContainer.config-fadeOut {
    animation: out-out .2s;
    animation-fill-mode: forwards;

    .bread {
        left: 0;
    }
}
</style>
